<template>
    <div>
        <el-form ref="ruleFormRef" style="width: 350px;margin-left: 350px;" :model="ruleForm" :rules="rules"
            label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="父级菜单">
                <el-select v-model="ruleForm.pId" placeholder="请选择父级菜单" clearable>
                    <el-option v-for="item in parentList" :label="item.menuName" :value="item.menuId"
                        :key="item.menuId" />
                </el-select>
            </el-form-item>
            <el-form-item label="菜单名称" prop="menuName" @change="menuonly">
                <el-input v-model="ruleForm.menuName" />
            </el-form-item>
            <el-form-item label="Url地址" prop="url">
                <el-input v-model="ruleForm.url" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)" size="small">
                    添加
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useCounterStore } from '@/stores/counter';
const apiUrl = import.meta.env.VITE_APP_API_URL;

const store = useCounterStore();
const router = useRouter();

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
    menuName: "",
    url: "",
    pId: null,
    createName: store.ccstore.nickName,
    createTime: Date.now,
    updateName: "",
    updateTime: "2025-02-27T07:21:21.204Z",
    orderById: 5
})

//菜单名称，Url，非空验证
const rules = reactive<FormRules>({
    menuName: [
        { required: true, message: '菜单名称不可为空', trigger: 'blur' },
    ],
    url: [
        { required: true, message: '跳转的Url地址不可为空', trigger: 'blur' },
    ],
})

//获取父级菜单
const parentList = ref([])
const getparentList = () => {
    axios.get(apiUrl+'/T5/Message/GetMenuAll').then(res => {
        parentList.value = res.data.data
        console.log(parentList.value)


    })
}
//唯一性验证的结果
const inter = <any>ref([])
//菜单名称唯一性验证
const menuonly = () => {
    axios.get(apiUrl+'/T5/Message/GetMenuName', {
        params: {
            MenuId: ruleForm.pId,
            MenuName: ruleForm.menuName
        }
    }).then(res => {
        inter.value = res.data.code
    })
}


//添加
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (inter.value == 209) {
                ElMessage.error("该菜单名称已经存在")
                return;
            }
            axios.post(apiUrl+'/T6/Message/AddMenu', ruleForm).then(res => {
                if (res.data.code == 212) {
                    ElMessage.success(res.data.msg);
                    router.push({
                        name: 'ListMenu'
                    })
                } else {
                    ElMessage.error("res.data.msg");
                }
            })
        }
    })
}

onMounted(() => {
    getparentList();
})
</script>
